<script>

import {formatDate} from "../../../util/js/utils";
import {searchReportData, submitAudit} from "./problemReportingJs";
import {dictionaryRequest} from "../../../util/js/globalRequestJs";

export default {
  name: "ProblemReporting",
  data() {
    return {
      tableData: [],
      multipleSelection: [],

      search: {
        reportTime: [],
        type: '',
        content: '',
        findingAudit: '0',
        pageSize: 5,
        currentPage: 1,
        totalNumber: 0,
      },
      row: {},
      isDialogVisible: false,
      audit: '',
      audits: [],
      auditOpinion: '',
      inspectionResult: '',
      inspectionResultDisabled: true,
      auditDisabled: true
    }
  },
  mounted() {
    this.getReportingData();
    this.getAuditData();
  },
  methods: {
    formatDate,
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    handleSizeChange(newSize) {
      this.search.pageSize = newSize;
      this.getReportingData();
    },
    handleCurrentChange(newPage) {
      this.search.currentPage = newPage;
      this.getReportingData();
    },
    // 获取审核
    getAuditData() {
      dictionaryRequest('report_record', 'finding_audit').then(res => {
        this.audits = res.data;
      }).catch(err => {
        this.$message.error("获取审核列表出错!")
        console.log(err);
      })
    },
    // 获取审核数据
    getReportingData() {
      const _this = this;
      searchReportData(_this.search).then(res => {
        if (res.code === '200') {
          _this.tableData = res.data.data;
          _this.search.totalNumber = res.data.totalNumber;
        } else {
          _this.$message.error("出错了：" + res.msg);
        }
      }).catch(err => {
        _this.$router.push('/framework/error');
        console.log(err);
      })
    },
    // 清空搜索内容
    clearSearch() {
      this.search.reportTime = [];
      this.search.type = '';
      this.search.context = '';
      this.search.pageSize = 5;
      this.search.currentPage = 1;
      this.search.findingAudit ='0';
      this.getReportingData();
    },
    // 改变审核结果
    auditChange() {
      const _this = this;
      if (_this.audit === '0' || _this.audit === '1') {
        _this.inspectionResultDisabled = true;
        _this.auditDisabled = true;
        // 防止出现错误数据，刷新
        _this.auditOpinion = '';
        _this.inspectionResult = '';
      } else if (_this.audit === '2') {
        // 还有问题，就显示意见栏
        _this.inspectionResultDisabled = true;
        _this.auditDisabled = false;
        _this.inspectionResult = '';
      } else if (_this.audit === '3') {
        // 审核通过，就显示结果栏进行填写
        _this.inspectionResultDisabled = false;
        _this.auditDisabled = true;
        _this.auditOpinion = '';
      }
    },
    // 提交审核
    submitAudit(row){
      const _this = this;
      if(_this.audit !== '2' && _this.audit !== '3'){
        _this.$message.warning("审核结果不可为此类型，请修改！")
        return false;
      }
      const report = {
        rid: row.ruuid.toString(),
        iid: row.iuuid.toString(),
        mid: row.muuid.toString(),
        audit: _this.audit,
        auditOpinion: _this.auditOpinion,
        inspectionResult: _this.inspectionResult,
      }
      submitAudit(report).then(res => {
        if (res.code === '200') {
          _this.$message.success("审核完成！")
          _this.isDialogVisible = false;
        }else{
          _this.$message.error("出错了："+res.msg);
        }
      }).catch(err => {
        _this.$message.error("系统出错了!")
        console.log(err)
      })
    },
    closeAudit(){
      this.isDialogVisible = false;
      this.audit = '';
    },
    // 显示时触发函数
    handleAuditData(row){
      // 根据外部传入的label值找到对应的value
      const selectedOption = this.audits.find(option => option.label === row.findingAudit);
      if (selectedOption) {
        this.audit = selectedOption.value; // 将找到的value值赋给this.audit
      }
    }
  }
}
</script>

<template>
  <div id="pr-main-container" class="pr-main-container">
    <div id="pr-assistant-container" class="pr-assistant-container">
      <div id="pr-one-container" class="pr-one-container">
        <div id="pr-search-container" class="pr-search-container">
          <div id="pr-search-data-container">
            <el-date-picker
              :clearable="false"
              v-model="search.reportTime"
              type="daterange"
              range-separator="至"
              start-placeholder="上报时间(始)"
              end-placeholder="上报时间(末)"
              size="small"
              style="width:230px">
            </el-date-picker>
            <el-select size="small" v-model="search.findingAudit" slot="prepend" placeholder="请选择" style="width: 100px">
              <el-option label="可审核" value="0"></el-option>
              <el-option label="处理问题" value="2"></el-option>
              <el-option label="通过" value="3"></el-option>
            </el-select>
          </div>
          &nbsp;
          <div id="pr-search-input-container">
            <el-input placeholder="请输入内容" v-model="search.content" class="input-with-select" style="width: 350px"
                      size="small">
              <el-select v-model="search.type" slot="prepend" placeholder="请选择" style="width: 100px">
                <el-option label="房源编号" value="1"></el-option>
                <el-option label="上报人" value="2"></el-option>
              </el-select>
            </el-input>
            <el-button slot="append" icon="el-icon-search" @click="getReportingData" size="small">搜索</el-button>
            <el-button slot="append" icon="el-icon-s-help" @click="clearSearch" size="small">清空</el-button>
          </div>
        </div>
      </div>
      <!--表格容器-->
      <div id="pr-table-container" class="pr-table-container">
        <el-table
          :data="tableData"
          style="width: 100%"
          border
          height="100%"
          @selection-change="handleSelectionChange">
          <!--====================序号====================-->
          <el-table-column
            type="index"
            width="30"
            align="center">
          </el-table-column>
          <!--====================选中====================-->
          <el-table-column
            type="selection"
            align="center"
            width="50">
          </el-table-column>
          <!--====================记录编号====================-->
          <el-table-column
            prop="ruuid"
            v-if=false>
          </el-table-column>
          <!--====================派遣巡查编号====================-->
          <el-table-column
            prop="iuuid"
            v-if=false>
          </el-table-column>
          <!--====================上报人员编号====================-->
          <el-table-column
            prop="muuid"
            v-if=false>
          </el-table-column>
          <!--====================房源编号====================-->
          <el-table-column
            prop="huuid"
            label="房源编号"
            width="150"
            align="center">
          </el-table-column>
          <!--====================上报人员姓名====================-->
          <el-table-column
            prop="managerUserName"
            label="上报人"
            width="100"
            align="center">
          </el-table-column>
          <!--====================上报内容====================-->
          <el-table-column
            prop="reportContent"
            label="上报内容"
            width="200"
            align="center">
          </el-table-column>
          <!--====================上报图片====================-->
          <el-table-column
            prop="reportPicture"
            label="图片"
            align="center"
            width="150">
            <template slot-scope="scope">
              <img :src="scope.row.picture" style="max-width: 125px; max-height: 125px;">
            </template>
          </el-table-column>
          <!--====================上报时间====================-->
          <el-table-column
            prop="reportTime"
            label="上报时间"
            width="180">
            <template slot-scope="scope">
              {{ formatDate(scope.row.reportTime) }}
            </template>
          </el-table-column>
          <!--====================审核结果====================-->
          <el-table-column
            prop="findingAudit"
            label="审核结果"
            width="100"
            align="center">
            <template slot-scope="scope">
              <span
                :style="{color: scope.row.findingAudit ==='未审核'?'red':(scope.row.findingAudit ==='次审核'?'yellow': (scope.row.findingAudit ==='审核通过'?'green':''))}">
                {{ scope.row.findingAudit }}</span>
            </template>
          </el-table-column>
          <!--====================操作====================-->
          <el-table-column label="操作">
            <template slot-scope="scope">
              <!--              <el-button-->
              <!--                :disabled="scope.row.findingAudit === '审核通过'"-->
              <!--                size="mini"-->
              <!--                type="success"-->
              <!--                @click="examineReport(scope.row)">-->
              <!--                <i class="el-icon-edit"></i>审核-->
              <!--              </el-button>-->
              <el-popover
                placement="right"
                width="500"
                @show="handleAuditData(scope.row)"
                v-model="isDialogVisible">
                <div>
                  <h4 style="text-align: center">审核&nbsp;上报人&nbsp;{{
                      scope.row.managerUserName
                    }}&nbsp;的巡查上报</h4>
                  <div id="dialog-select">
                    <span class="title-name">审核：</span>
                    <el-select v-model="audit" placeholder="请选择" size="mini" style="width: 120px;"
                               @change="auditChange">
                      <el-option
                        v-for="item in audits"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                      </el-option>
                    </el-select>
                  </div>
                  <div id="audit-opinion">
                    <span class="title-name">审核意见：</span>
                    <el-input
                      type="textarea"
                      placeholder="选择处理问题可填"
                      v-model="auditOpinion"
                      :disabled="auditDisabled"
                      maxlength="30"
                      rows="3"
                      show-word-limit
                      style="width:350px;"
                    >
                    </el-input>
                  </div>
                  <div id="inspection-result">
                    <span class="title-name">巡查结果：</span>
                    <el-input
                      type="textarea"
                      placeholder="选择审核通过时可填，修改的是巡查派遣中的巡查结果"
                      v-model="inspectionResult"
                      :disabled="inspectionResultDisabled"
                      maxlength="30"
                      rows="3"
                      show-word-limit
                      style="width:350px;">
                    </el-input>
                  </div>
                  <div id="audit-button">
                    <el-button @click="closeAudit" type="primary" size="small" plain>关闭</el-button>
                    <el-button @click="submitAudit(scope.row)" style="margin-left: 60px;" type="primary" size="small" plain>提交</el-button>
                  </div>
                </div>
                <el-button
                  slot="reference"
                  :disabled="scope.row.findingAudit === '通过'"
                  size="mini"
                  type="success">
                  <i class="el-icon-edit"></i>审核
                </el-button>
              </el-popover>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div id="pr-page-container" class="pr-page-container">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="search.currentPage"
          :page-sizes="[5,10,15,20,50]"
          :page-size="search.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="search.totalNumber">
        </el-pagination>
      </div>
    </div>
    <!--    <div id="pr-dialog-container" class="pr-dialog-container">-->
    <!--      <div v-if="isDialogVisible" id="pr-dialog" class="pr-dialog">-->
    <!--        <h1>审核上报人{{ this.row.managerUserName }}的巡查上报</h1>-->
    <!--        <div id="dialog-select">-->
    <!--          <span class="title-name">审核：</span>-->
    <!--          <el-select v-model="audit" placeholder="请选择" size="mini" style="width: 120px;" @change="auditChange">-->
    <!--            <el-option-->
    <!--              v-for="item in audits"-->
    <!--              :key="item.value"-->
    <!--              :label="item.label"-->
    <!--              :value="item.value">-->
    <!--            </el-option>-->
    <!--          </el-select>-->
    <!--        </div>-->
    <!--        <div id="audit-opinion">-->
    <!--          <span class="title-name">审核意见：</span>-->
    <!--          <el-input-->
    <!--            type="textarea"-->
    <!--            placeholder="请输入内容"-->
    <!--            v-model="auditOpinion"-->
    <!--            :disabled="auditDisabled"-->
    <!--            maxlength="30"-->
    <!--            rows="3"-->
    <!--            show-word-limit-->
    <!--            style="width:350px;"-->
    <!--          >-->
    <!--          </el-input>-->
    <!--        </div>-->
    <!--        <div id="inspection-result">-->
    <!--          <span class="title-name">巡查结果：</span>-->
    <!--          <el-input-->
    <!--            type="textarea"-->
    <!--            placeholder="请输入内容"-->
    <!--            v-model="inspectionResult"-->
    <!--            :disabled="inspectionResultDisabled"-->
    <!--            maxlength="30"-->
    <!--            rows="3"-->
    <!--            show-word-limit-->
    <!--            style="width:350px;"-->
    <!--          >-->
    <!--          </el-input>-->
    <!--        </div>-->
    <!--      </div>-->
    <!--    </div>-->

  </div>
</template>

<style scoped>
@import "problemReportingCss.css";
</style>
